<template>
	<view class="content" id="content" :style="{height: style.contentViewHeight + 'px'}">
		<view style="position:fixed;z-index:1000;" v-if="showAlert && GroupInfo.MsgGroupType === 1">
			<fui-alert type="warn" closable background="#FFCC00" title="您已进入聊天室, 请注意文明用语,请勿发布不当言论和违规图片,否则将被禁言或移出聊天室."
				v-if="showAlert" @close="closeAlert"></fui-alert>
		</view>
		<fui-landscape :show="openRedbag" :position="3" @close="hideRedbag">
			<view style="width:80vw;height:60vh;background-color:#FF3300;border-radius:20rpx">
				<view v-if="isGetRedbag">
					<view
						style="height:35vh;text-align:center;background-color:#FF6600;border-radius:20rpx 20rpx 200rpx 200rpx;color:#FFF">
						<view style="width:100%;padding-top:100rpx;">
							<image :src="currRedbag.FormUser.WxHeadPic"
								style="margin:auto;width:60rpx;height:60rpx;border-radius:60rpx;" mode="widthFix">
							</image>
						</view>
						<view style="">{{ currRedbag.FormUser.MsgGroupMemberName }} 的红包</view>
						<view>{{ currRedbag.MsgContent.redcontent }}</view>
					</view>
					<view style="color:#FFF;text-align:center;padding:20rpx;" @click="getRedbagList">
						查看红包领取情况
					</view>
				</view>
				<view v-else>
					<view
						style="height:35vh;text-align:center;border-radius:20rpx 20rpx 200rpx 200rpx;background-color:#FF6600;color:#FFF">
						<view style="width:100%;padding-top:100rpx;">
							<image :src="currRedbag.FormUser.WxHeadPic"
								style="margin:auto;width:60rpx;height:60rpx;border-radius:60rpx;" mode="widthFix">
							</image>
						</view>
						<view style="">{{ currRedbag.FormUser.MsgGroupMemberName }} 的红包</view>
						<view>{{ currRedbag.MsgContent.redcontent }}</view>
					</view>
					<view
						style="position:absolute;left:50%;margin-left:-75rpx;top:50%;width:150rpx;height:150rpx;background:#FF9900;border-radius:150rpx;color:#FFF;text-align:center;line-height:150rpx;"
						@click="getRedbag">
						抢领红包
					</view>
				</view>
			</view>
		</fui-landscape>
		<fui-bottom-popup :show="showRedbag" @close="closeRedbag">
			<view class="fui-custom__wrap">
				<view style="height:90vh" v-if="showRedbagList">
					<view class="popupCloseBtn" @click="closeRedbag">
						返回聊天室
					</view>
					<view style="background-color:#FF6600;height:40rpx;color:#FFF;padding:20rpx;" @click="closeRedbag">
						关闭</view>
					<view style="height:300rpx;text-align:center;background-color:#FF6600;color:#FFF">
						<view style="width:100%;">
							<image :src="currRedbag.FormUser.WxHeadPic"
								style="margin:auto;width:80rpx;height:80rpx;border-radius:60rpx;" mode="widthFix">
							</image>
						</view>
						<view style="">{{ currRedbag.FormUser.MsgGroupMemberName }} 的红包</view>
						<view>{{ currRedbag.MsgContent.redcontent }}</view>
						<view style="font-size:40rpx;padding:30rpx;">
							<image :src="baseUrl + 'icon/goldcoin.png'" style="width:60rpx;height:60rpx;"></image>
							<text>{{ currRedbag.MsgContent.redprice }} 金币</text>
						</view>
					</view>
					<view style="background:#FFF;padding:20rpx;">{{ currRedbag.MsgContent.rednum }}
						个红包，{{ currRedbag.GetRedbagCount }}个已被领取</view>
					<scroll-view scroll-y class="getRedbagList">
						<view v-for="(item, index) in currRedbag.GetRedbagList" :key="index">
							<view style="height:70rpx;padding:20rpx;border-bottom:1rpx solid #f0f0f0">
								<view style="float:left;">
									<image :src="item.FromUser.WxHeadPic"
										style="margin:auto;width:70rpx;height:70rpx;border-radius:60rpx;"
										mode="widthFix"></image>
								</view>
								<view style="float:left;margin-left:10rpx;">
									<text
										style="font-size:24rpx;color:#333">{{ item.FromUser.MsgGroupMemberName }}</text><br>
									<text style="font-size:20rpx;color:#999">{{ item.MsgTime }}</text>
								</view>
								<view style="float:right;">{{ JSON.parse(item.MsgContent).redprice }}金币</view>
							</view>
						</view>
						<view style="height:60rpx;"></view>
					</scroll-view>
				</view>
				<view style="height:90vh" v-else>
					<view style="height:100rpx;color:#999;padding:20rpx;" @click="closeRedbag">关闭</view>
					<fui-form>
						<fui-form-item>
							<fui-input label="红包数量" type="number" v-model="SendRedbagNum" :borderBottom="false"
								textRight placeholder="填写个数">个</fui-input>
							<!-- <input label="红包数量" type="number" v-model="SendRedbagNum" placeholder="填写个数">个</input> -->
						</fui-form-item>
						<fui-form-item>
							<fui-input label="单个金额" type="number" v-model="SendRedbagPrice" :borderBottom="false"
								textRight placeholder="0">金币</fui-input>
						</fui-form-item>
						<fui-form-item>
							<fui-input :borderBottom="false" placeholder="恭喜发财,大吉大利"
								v-model="SendRedbagContent"></fui-input>
						</fui-form-item>
						<view style="width:300rpx;height:80rpx;margin:auto;padding:40rpx;">
							<view style="float:left;width:60rpx;padding:5rpx;">
								<image :src="baseUrl + 'icon/goldcoin.png'" style="width:60rpx;height:60rpx;"></image>
							</view>
							<view style="float:left;margin-left:10rpx; width:200rpx;">
								<text style="font-size:60rpx;">{{ SendRedbagTotal }}</text>
								<text style="font-size:28rpx;">金币</text>
							</view>
						</view>
						<view style="width:300rpx;margin:auto;">
							<fui-button background="#FFDD00" color="#000" width="300rpx"
								@click="sendRedbagHandle">确定发放</fui-button>
						</view>
						<view style="padding:40rpx;color:#999;font-size:24rpx;">
							发放红包，将从您的金币钱包中扣除相应金币；如红包未被领取完毕，24小时后将未领金币回退至您的钱包.</view>
					</fui-form>
				</view>
			</view>
		</fui-bottom-popup>
		<!-- style.contentViewHeight + 'px' -->
		<scroll-view class="display" scroll-y="true" :style="{height: style.contentViewHeight + 'px'}"
			:scroll-into-view="scrollIntoView" @scrolltoupper="onScrolltouppe" :scroll-top="scrollTop">
			<!-- :refresher-enabled="true" refresher-background="#f8f8f8" :refresher-triggered="isRefres" @refresherrefresh="onRefresherrefresh"  @scroll="scroll" -->
			<view class="content-all">
				<view class="m-item" style="padding-bottom: 50rpx;">
					<view v-for="(item,index) in MessageList" :key="index" :id="'msg' + index">
						<view class="msgTime" v-if="item.ShowMsgTime">{{ item.MsgTime }}</view>
						<view v-if="item.FormUserID == MyUserID">
							<view style="margin-bottom:20rpx;" v-if="item.MsgContentType === 3">
								<view class="msgTime">
									我领取了 {{ item.GetRedbag.NickName }} 的红包
								</view>
							</view>
							<view class="myMsgs" v-else>
								<view class="msgHead" @click="gotoArtister(item)">
									<image :src="item.FormUser.WxHeadPic"></image>
								</view>
								<view class="msgInfo">
									<view v-if="item.MsgContentType === 0 || item.MsgContentType === 1"
										@longpress="onLongPress(index, item)">
										<fui-bubble-box :items="bubbleItems" width="150"
											:padding="['20rpx','20rpx','20rpx','20rpx']" size="24" background="#FFF"
											direction="top" position="absolute" :ref="`bubbleShow${index}`"
											@click="itemClick($event, index, item)" @close="onClose(index, item)">
											<view class="myMsg" v-if="item.MsgContentType === 0">
												<text v-if="item.MsgState === 0" style="color:#999">消息已撤回</text>
												<text v-else>{{ item.MsgContent.inputMsg }}</text>
											</view>
											<view v-if="item.isQuotation !== 0"
												style="margin-top:4rpx;padding:10rpx;background-color:#e9e9e9;border-radius:10rpx;">
												<text
													style="font-size:20rpx">{{ item.Quotation.NickName }}：{{ item.Quotation.MsgContent.inputMsg || formatContent }}</text>
											</view>
											<view class="picMsg" v-if="item.MsgContentType === 1">
												<image :src="item.MsgContent" style="width:300rpx;" mode="widthFix"
													@click="previewImage(item.MsgContent)"></image>
											</view>
										</fui-bubble-box>
									</view>
									<view class="redBagMsg" v-if="item.MsgContentType === 2">
										<view v-if="item.isGetRedbag">
											<view class="yellowbag" @click="RedbagHandle(item, true)">
												<fui-icon name="redpacket" :size="80" color="#FFF"></fui-icon>
												<view>
													<text>{{ item.MsgContent.redcontent }}</text><br>
													<text style="font-size:20rpx">已领取</text>
												</view>
											</view>
										</view>
										<view v-else>
											<view class="redbag" @click="getRedbagHandle(item)"
												v-if="item.GetRedbagCount < item.MsgContent.rednum && item.keling">
												<fui-icon name="redpacket" :size="80" color="#FFF"></fui-icon>
												<view>
													<text>{{ item.MsgContent.redcontent }}</text><br>
													<text style="font-size:20rpx">红包待领取</text>
												</view>
											</view>
											<view class="blackbag" @click="RedbagHandle(item, false)" v-else>
												<fui-icon name="redpacket" :size="80" color="#FFF"></fui-icon>
												<view>
													<text>{{ item.MsgContent.redcontent }}</text><br>
													<text style="font-size:20rpx" v-if="item.keling">已错过机会</text>
													<text style="font-size:20rpx" v-else>红包已过期</text>
												</view>
											</view>
										</view>
									</view>
									<!-- <view v-if="item.MsgContentType === 3">
										<text style="color:#999">我领取了 {{ item.GetRedbag.NickName }} 的红包</text>
									</view> -->
								</view>
							</view>
						</view>
						<view v-else>
							<view class="otherMsgs" v-if="item.isShow">
								<view class="msgHead" @click="gotoArtister(item)">
									<image :src="item.FormUser.WxHeadPic"></image>
								</view>
								<view class="msgInfo">
									<view class="msgName">{{ item.FormUser.NickName }}</view>
									<view space="ensp">
										<view v-if="item.MsgContentType === 0 || item.MsgContentType === 1"
											@longpress="onLongPress(index, item)">
											<fui-bubble-box :items="otherBubbleItems" width="150"
												:padding="['20rpx','20rpx','20rpx','20rpx']" size="24" background="#FFF"
												direction="top" position="absolute" :ref="`bubbleShow${index}`"
												@click="itemOtherClick($event, index, item)"
												@close="onClose(index, item)">
												<view class="otherMsg" v-if="item.MsgContentType === 0">
													<text v-if="item.MsgState === 0" style="color:#999">消息已撤回</text>
													<text v-else>{{ item.MsgContent.inputMsg }}</text>
												</view>
												<view v-if="item.isQuotation !== 0"
													style="margin-top:4rpx;padding:10rpx;background-color:#e9e9e9;border-radius:10rpx;">
													<text
														style="font-size:20rpx">{{ item.Quotation.NickName }}：{{ item.Quotation.MsgContent.inputMsg || formatContent }}</text>
												</view>
												<view class="picMsg" v-if="item.MsgContentType === 1">
													<image :src="item.MsgContent" style="width:300rpx;" mode="widthFix"
														@click="previewImage(item.MsgContent)"></image>
												</view>
											</fui-bubble-box>
										</view>
										<view class="redBagMsg" v-if="item.MsgContentType === 2">
											<view v-if="item.isGetRedbag">
												<view class="yellowbag" @click="RedbagHandle(item, true)">
													<fui-icon name="redpacket" :size="80" color="#FFF"></fui-icon>
													<view>
														<text>{{ item.MsgContent.redcontent }}</text><br>
														<text style="font-size:20rpx">已领取</text>
													</view>
												</view>
											</view>
											<view v-else>
												<view class="redbag" @click="getRedbagHandle(item)"
													v-if="item.GetRedbagCount < item.MsgContent.rednum && item.keling">
													<fui-icon name="redpacket" :size="80" color="#FFF"></fui-icon>
													<view>
														<text>{{ item.MsgContent.redcontent }}</text><br>
														<text style="font-size:20rpx">红包待领取</text>
													</view>
												</view>
												<view class="blackbag" @click="RedbagHandle(item, false)" v-else>
													<fui-icon name="redpacket" :size="80" color="#FFF"></fui-icon>
													<view>
														<text>{{ item.MsgContent.redcontent }}</text>
														<text style="font-size:20rpx">已错过机会</text>
													</view>
												</view>
											</view>
										</view>
										<view class="otherMsg" v-if="item.MsgContentType === 3">
											<text>领取了 {{ item.GetRedbag.NickName }} 的红包</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>

				</view>
			</view>
		</scroll-view>

		<view class="bottomInput">
			<view class="flexbc" style="padding:15rpx;padding-top:10rpx;">
				<view class="qiehuanBtn">
					<fui-icon name="keyboard" :size="60" @click="showKeyboard"></fui-icon>
					<!-- <fui-icon name="voice" :size="60" v-if="inputType" v-else></fui-icon> @blur="handleBlur" :always-embed="true" :adjust-position="false"  -->
				</view>
				<view style="width:65%;margin-right:20rpx;">
					<textarea v-model="inputMsg" cursor-spacing="10" auto-height :focus="inputFocus"
						:hold-keyboard="holdKeyboard" class="msgInput" @click="checkUserLevel" />
					<view v-if="isQuotation !== 0" class="quotation flexbc">
						<text>{{ QuotationItem.MsgContent.inputMsg.slice(0, 45) }}</text>
						<fui-icon name="close" size="30" @click="endQuotation"></fui-icon>
					</view>
				</view>
				<view class="biaoqing" @click="showBiaoqing">
					<fui-icon name="face" :size="60"></fui-icon>
				</view>
				<view>
					<button class="sendBtn" @touchend.prevent="sendMsg">发送</button>
				</view>
			</view>
			<div style="height:200rpx" v-if="showBoard">
				<div style="float:left;margin:20rpx;" @click="sendPic">
					<div style="width:50rpx;height:50rpx;border-radius:50rpx;margin:auto;text-align:center;">
						<fui-icon name="picture" :size="40"></fui-icon>
					</div>
					<div style="font-size:24rpx;">发图片</div>
				</div>
				<div style="float:left;margin:20rpx;" @click="sendRedbag">
					<div style="width:50rpx;height:50rpx;border-radius:50rpx;margin:auto;text-align:center;">
						<fui-icon name="redpacket" :size="40"></fui-icon>
					</div>
					<div style="font-size:24rpx;">发红包</div>
				</div>
			</div>
			<div style="height:200rpx" v-if="showBiaoqingBoard">
				<div style="float:left;margin:5rpx;margin-right:10rpx;font-size:42rpx" v-for="(item,index) in biaoqing"
					:key="index" @click="sendBiaoqing(item)">{{ item }}</div>
			</div>
			<!-- <view class="btmGroupSet" @click="GroupSet">进入群设置，了解会员聊天相关权限</view> -->
		</view>
		<fui-safe-area></fui-safe-area>
		<fui-modal :buttons="[]" width="600" :show="isYueCheck">
			<fui-icon name="warning-fill" :size="108" color="#FF6600"></fui-icon>
			<text class="fui-title">金币余额不足</text>
			<text class="fui-descr">您的金币余额不足以发放红包，请先进行充值！</text>
			<fui-button text="去充值" width="240rpx" height="72rpx" :size="28" radius="36rpx" background="#FFB703"
				borderWidth="0" :margin="['0','0','24rpx']" @click="goRecharge">
			</fui-button>
			<view class="fui-icon__close" @tap="onCancel">
				<fui-icon name="close" color="#B2B2B2" :size="48"></fui-icon>
			</view>
		</fui-modal>
	</view>
</template>

<script>
	import {
		connectSocketInit,
		sendMessage
	} from "@/script/websocket.js";
	export default {
		filters: {
			formatContent(msg) {
				if (msg) {
					return msg.substring(0, 30) + '..'
				}
			}
		},
		data() {
			return {
				// 是否触发下拉
				isRefres: false,
				showAlert: true,
				MyUserInfo: {},
				MyUserID: 0,
				MyUserLevelID: 0,
				MsgGroupID: 0,
				GroupInfo: {},
				MessageList: [],
				Msglength: 0,
				scrollTop: 0,
				style: {
					pageHeight: 0,
					contentViewHeight: 0,
					footViewHeight: 90,
					mitemHeight: 0
				},
				inputMsg: '',
				inputType: 0,
				showBoard: false,
				biaoqing: ['😀', '😅', '🤣', '😂', '🙂', '🙃', '😉', '😊', '😇', '🥰'],
				showBiaoqingBoard: false,
				showRedbag: false,
				openRedbag: false,
				showRedbagList: false,
				currRedbag: {},
				isGetRedbag: false,
				SendRedbagNum: '',
				SendRedbagPrice: '',
				SendRedbagContent: '',
				bubbleShow: false,
				bubbleItems: [{
					text: '撤回'
				}, {
					text: '复制'
				}, {
					text: '引用'
				}],
				otherBubbleItems: [{
					text: '复制'
				}, {
					text: '引用'
				}],
				getRedbagState: false,
				inputFocus: false,
				holdKeyboard: true,
				isYueCheck: false,
				isQuotation: 0,
				QuotationItem: {},
				page: 1,
				baseUrl: '',
				newHeight: 0,
				scrollIntoView: 'msg0',

				isStartPage: true, // 是否执行分页
			};
		},
		onLoad(option) {
			this.baseUrl = this.$baseUrl;
			this.page = 1;


			uni.setStorageSync("MsgGroupID", option.MsgGroupID);
			this.MsgGroupID = option.MsgGroupID;
			this.getMaxHeight(this.style.pageHeight);
		},
		onShow() {
			this.MsgGroupID = uni.getStorageSync("MsgGroupID")

			setTimeout(() => {
				this.loadMessage()
			}, 0)
			uni.onSocketMessage((res) => {

				if (res.data !== 'pong') {
					this.updateMsg()
				}
			});

		},
		created() {
			const res = uni.getSystemInfoSync(); //获取手机可使用窗口高度     api为获取系统信息同步接口
			// console.log('手机可使用窗口高度', res);
			this.style.pageHeight = res.windowHeight;
			// this.style.contentViewHeight = res.windowHeight - uni.getSystemInfoSync().screenWidth / 750 * 100 - 280; 
			this.style.contentViewHeight = res.windowHeight - 54;
			//像素   因为给出的是像素高度 然后我们用的是upx  所以换算一下 
		},
		computed: {
			SendRedbagTotal() {
				let RedbagTotal = parseInt(this.SendRedbagPrice) * parseInt(this.SendRedbagNum);
				if (!RedbagTotal) RedbagTotal = 0
				return RedbagTotal;
			}
		},
		onBackPress(e) {
			console.log('onBackPress', e)
			this.closeRedbag()
			//  if (e.from === 'navigateBack') {
			//    console.log('返回键是通过导航栏返回按钮触发的');
			// this.closeRedbag()
			//    // 可以在这里执行一些操作，比如提示用户是否真的要返回
			//    // return true 表示阻止默认行为，false 表示不阻止
			//    return true;
			//  }
			// 如果不是通过导航栏返回按钮触发，不阻止默认行为
			return false;
		},
		methods: {
			previewImage(url) {
				// 使用uni.previewImage进行图片预览
				uni.previewImage({
					current: url, // 当前显示的图片链接
					urls: [url] // 需要预览的图片链接列表
				})
			},
			// scroll(e) {
			// 	console.log(e)
			// 	this.newHeight = e.detail.scrollHeight;
			// },
			// 自定义下拉刷新被触发
			onScrolltouppe(event) {
				// console.log('event', event)
				// this.isStartPage = false;
				this.page += 1;
				uni.showLoading({
					title: '加载中'
				})
				if (this.isStartPage) this.getRefresherMessageList()
				// console.log('this.scrollIntoView ', this.scrollIntoView)
				this.isStartPage = false;
			},
			getRefresherMessageList() {

				this.$httpost('/message/LoadMoreMessage', {
					page: this.page,
					MsgGroupID: this.GroupInfo.MsgGroupID,
				}).then(res => {
					if (res.code == 200) {
						if (this.MessageList.length != 0) {
							this.MessageList = [...res.data.MessageList, ...this.MessageList];
							// const lastMessageId = 'msg' + (this.MessageList.length - res.data.messages.length);
							// this.scrollIntoView = lastMessageId;

							if (this.scrollIntoView == 'msg9') {
								this.scrollIntoView = 'msg10'
							} else {
								this.scrollIntoView = 'msg9'
							}
						}
						if (res.data.MessageList.length == 0) {
							this.scrollIntoView = ''
							uni.showToast({
								title: '只显示最新消息',
								icon: 'none'
							})
						}
						uni.hideLoading()
						this.isStartPage = true;
						// let that = this;
						// that.$nextTick(() => {
						// 	const query = uni.createSelectorQuery()
						// 	query.select(".m-item").boundingClientRect();
						// 	query.exec((data) => {
						// 		that.scrollTop = data[0].height -that.newHeight;
						// 	})
						// })

					}
				})
			},

			// 计算高度
			getMaxHeight(systemHeight) {
				let that = this;
				// console.log('systemHeight', systemHeight)
				setTimeout(() => {
					const query = uni.createSelectorQuery();
					// lementHeight = 0
					query.select('.bottomInput').boundingClientRect();
					query.select('.m-item').boundingClientRect();
					query.exec(data => {
						// console.log('节点数据', data)
						//可显示聊天区域的高度 = 聊天内容窗口高度 - 视口高度 + 底部输入框高度
						let contentHeight = data[1].height - systemHeight + data[0].height;
						that.scrollTop = contentHeight;
					})
				}, 1000)
			},
			endQuotation() {
				this.isQuotation = 0
				this.QuotationItem = {}
			},
			closeAlert() {
				this.showAlert = false;
			},
			itemOtherClick(e, index, item) {
				if (e.index === 0) {
					uni.setClipboardData({
						data: item.MsgContent.inputMsg,
						showToast: false,
						success: function() {
							uni.showToast({
								title: '复制成功',
								icon: 'none'
							})
						},
						fail: err => {
							console.log(err)
						}
					});
				}

				if (e.index === 1 && item.MsgState == 1) {
					this.isQuotation = item.MsgID
					this.QuotationItem = item
				}

				this.onClose(index, item)
			},
			itemClick(e, index, item) {

				if (e.index === 0) {
					this.$httpost('/Message/WithDraw', {
						MsgID: item.MsgID
					}).then(res => {
						// console.log('MessageData', res);
						if (res.code == 200) {
							this.MessageList = res.data.MessageList;
						}
					});

				}
				if (e.index === 1) {
					uni.setClipboardData({
						data: item.MsgContent.inputMsg,
						showToast: false,
						success: function() {
							uni.showToast({
								title: '复制成功',
								icon: 'none'
							})
						},
						fail: err => {
							console.log(err)
						}
					});
				}

				if (e.index === 2 && item.MsgState == 1) {
					this.isQuotation = item.MsgID
					this.QuotationItem = item
				}

				this.onClose(index, item)
			},
			onClose(index, item) {
				this.$refs[`bubbleShow${index}`][0].closeShow()
			},
			onLongPress(index, item) {
				// 如果消息已撤回，则不弹出操作气泡
				if (item.MsgState !== 0) {
					this.$refs[`bubbleShow${index}`][0].updateShow()
				}
			},
			sendBiaoqing(emoji) {
				this.inputMsg += emoji;
			},
			getRedbagList() {
				this.openRedbag = false;
				this.showRedbagList = true;
				this.showRedbag = true;
			},
			RedbagHandle(redbag, isGetRedbag) {
				this.currRedbag = redbag;
				this.isGetRedbag = true;
				this.openRedbag = true;
			},
			hideRedbag() {
				this.openRedbag = false;
			},
			getRedbagHandle(redbag) {
				// console.log('redbag', redbag)
				// 打开领红包
				this.currRedbag = redbag;
				this.isGetRedbag = false;
				this.openRedbag = true;

			},
			getRedbag() {
				this.getRedbagState = true
				this.MyUserID = this.MyUserInfo.UserID
				this.MyUserLevelID = this.MyUserInfo.UserLevelID

				let GetRedCheckParams = {
					MsgID: this.currRedbag.MsgID
				}

				this.$httpost('/Message/isGetRedCheck', GetRedCheckParams).then(res => {
					// console.log('同时领最后一个红包时，进行拦截并发检查：', res);
					if (res.code == 200) {

						if (res.data == 1) {
							let getRed = {
								rednum: 1,
								redprice: this.currRedbag.MsgContent.redprice,
								redtotal: this.currRedbag.MsgContent.redprice
							}
							// console.log('sendToGroup', this.MsgGroupID, this.MyUserID, 3, this.currRedbag.MsgID, getRed);
							sendMessage('sendToGroup', this.MsgGroupID, this.MyUserID, 3, this.currRedbag.MsgID,
								getRed);

							// console.log('this.currRedbag', this.currRedbag)
							this.getRedbagList();
						} else if (res.data == 0) {
							uni.showToast({
								icon: 'none',
								title: '很遗憾，红包已被领完！'
							})
							return false;
							// this.getRedbagList();
						} else {
							uni.showToast({
								icon: 'none',
								title: '很遗憾，红包已过期！'
							})

							return false;
						}
					}
				});

			},
			sendRedbagHandle() {
				this.MyUserID = this.MyUserInfo.UserID
				this.MyUserLevelID = this.MyUserInfo.UserLevelID

				if (this.SendRedbagTotal == 0) {
					uni.showToast({
						icon: 'none',
						title: '请输入红包数量和金额'
					})
					return false;
				}

				this.$httpost('/UserWallet/CheckUserWalletYue', {}).then(res => {
					// console.log('CheckUserWalletYue', res);
					if (res.code == 200) {
						if (res.data.UserWalletYue >= this.SendRedbagTotal) {
							this.closeBoard();
							this.closeRedbag();

							if (this.SendRedbagContent == '') {
								this.SendRedbagContent = '恭喜发财，大吉大利'
							}

							let sendRed = {
								rednum: parseInt(this.SendRedbagNum),
								redprice: parseInt(this.SendRedbagPrice),
								redtotal: this.SendRedbagTotal,
								redcontent: this.SendRedbagContent
							}

							// console.log('sendToGroup', this.MsgGroupID, this.MyUserID, 2, 0, sendRed);
							sendMessage('sendToGroup', this.MsgGroupID, this.MyUserID, 2, 0, sendRed);
						} else {

							// const _that = this;

							this.isYueCheck = true
							// uni.showModal({
							// 	title: '金币余额不足',
							// 	content: '金币余额不足以发放红包，请先进行充值！',
							// 	// cancelText: "不充了",
							// 	confirmText: "去充值",
							// 	success(res) {
							// 		if (res.confirm) {										
							// 			uni.navigateTo({
							// 				url: '/myPages/pages/reCharge'
							// 			})
							// 		} else if (res.cancel) {
							// 			_that.closeBoard();
							// 			_that.closeRedbag();
							// 		}
							// 	}
							// })
							return false;
						}
					}
				});

			},
			goRecharge() {
				uni.navigateTo({
					url: '/myPages/pages/reCharge'
				})
			},
			onCancel() {
				this.isYueCheck = false;
			},
			sendPic() {
				this.MyUserID = this.MyUserInfo.UserID
				this.MyUserLevelID = this.MyUserInfo.UserLevelID

				let _that = this;
				uni.chooseMedia({
					count: 1,
					mediaType: ['image'],
					sourceType: ['album'],
					success(res) {
						// console.log('sendPic', res)
						_that.closeBoard();

						let sendImg = res.tempFiles[0].tempFilePath;

						_that.uploadPic(sendImg);

					}
				})
			},
			uploadPic(sendImg) {
				let _that = this;
				uni.uploadFile({
					url: this.$imgUpload + 'chat&type=image', //仅为示例，非真实的接口地址
					filePath: sendImg,
					name: "file",
					formData: {},
					success: (uploadFileRes) => {
						// console.log('uploadFileRes', uploadFileRes);

						let ResData = JSON.parse(uploadFileRes.data);

						let sendPicUrl = _that.$baseUrl + ResData.fileName;

						_that.SendPicMsg(sendPicUrl)

					}
				});
			},
			SendPicMsg(sendPicUrl) {
				let _that = this
				let MyUser = uni.getStorageSync("isLogin");

				setTimeout(function() {
					// console.log('sendToGroup', _that.MsgGroupID, MyUser.UserID, 1, 0, sendPicUrl);
					sendMessage('sendToGroup', _that.MsgGroupID, MyUser.UserID, 1, 0, sendPicUrl);
				}, 100)
			},
			sendRedbag() {
				this.showRedbag = true;
			},
			closeRedbag() {
				this.currRedbag = {},
					this.showRedbagList = false;
				this.showRedbag = false;
			},
			showKeyboard() {
				this.showBoard = !this.showBoard;
				this.inputFocus = false;
				this.holdKeyboard = false;
				this.showBiaoqingBoard = false;
			},
			showBiaoqing() {
				this.showBoard = false;
				this.inputFocus = false;
				this.holdKeyboard = false;
				this.showBiaoqingBoard = !this.showBiaoqingBoard;
			},
			closeBoard() {
				this.showBoard = false;
			},
			checkUserLevel() {
				this.showAlert = false;
				this.holdKeyboard = true;
				this.MyUserID = this.MyUserInfo.UserID
				this.MyUserLevelID = this.MyUserInfo.UserLevelID
				if (this.MsgGroupID == 2) {
					if (this.MyUserLevelID == 0) {
						if (this.MyUserInfo.isArtister == 0) {
							this.inputMsg = '';
							uni.showModal({
								content: '您还没有成为会员，不能使用聊天室功能，您需要加入会员才可以参与聊天',
								cancelText: '暂不加入',
								confirmText: '加入会员',
								success: (ures) => {
									if (ures.confirm) {
										console.log('执行加入')
										uni.navigateTo({
											url: '/myPages/pages/openMember'
										})
									} else if (ures.cancel) {
										console.log('不加入')
									}
								}
							})
							return false;
						}
					}
				}

			},
			gotoArtister(item) {
				this.$common.goNavPage('/artistesPages/pages/artister?artisterID=' + item.FormUser.UserID);
			},
			qiehuanBtn() {
				this.inputType = !this.inputType
			},
			changeIn({
				text,
				html,
				length
			}) {
				this.inText.push(html);
			},
			loadMessage() {
				this.$httpost('/Message/Message', {
					MsgGroupID: this.MsgGroupID
				}).then(res => {
					// console.log('MessageData', res);
					if (res.code == 200) {
						this.MyUserInfo = res.data.MyUserInfo
						this.MyUserID = res.data.MyUserInfo.UserID

						this.GroupInfo = res.data.GroupInfo
						this.MessageList = res.data.MessageList;

						// console.log('joinGroup', this.MsgGroupID, this.MyUserID, '回到本会话！')

						sendMessage('joinGroup', this.MsgGroupID, this.MyUserID, '回到本会话！');

						if (this.MessageList.length != this.Msglength) {
							this.Msglength = this.MessageList.length;
							// this.scrollTop = this.scrollTop + 100;							
						}

						uni.setNavigationBarTitle({
							title: this.GroupInfo.MsgGroupName
						})

					}

				});

				// uni.onSocketMessage((res)=>{
				// 	console.log('监听', res)
				// 	// if(res.data != "connectok"&&res.data != "pong"){
				// 	// 	this.loadMessage();
				// 	// }
				// });
			},
			handleBlur(e) {
				this.inputFocus = false;
			},
			sendMsg() {
				this.holdKeyboard = true;
				this.showBoard = false;
				this.showBiaoqingBoard = false;
				// console.log('sendToGroup', this.MsgGroupID, this.MyUserID, this.MyUserLevelID, this.inputMsg);
				if (this.inputFocus == false) {
					this.inputFocus = true;
				}

				if (this.MsgGroupID == 2) {
					if (this.MyUserLevelID == 0) {
						if (this.MyUserInfo.isArtister == 0) {
							this.inputMsg = ''
							uni.showModal({
								content: '您还没有成为会员，不能使用聊天室功能，您需要加入会员才可以参与聊天，\r\n是否加入？',
								cancelText: '暂不加入',
								confirmText: '加入会员',
								success: (ures) => {
									if (ures.confirm) {
										// console.log('执行加入')
										uni.navigateTo({
											url: '/myPages/pages/openVip'
										})
									} else if (ures.cancel) {
										// console.log('不加入')
									}
								}
							})
							return false;
						}
					}
				}

				if (this.inputMsg == '') {
					uni.showToast({
						title: '不可发送空消息',
					})
				} else {

					let MyUser = uni.getStorageSync("isLogin");

					// console.log('this.MyUserID', MyUser.UserID)

					let sendText = {
						inputMsg: this.inputMsg,
						isQuotation: this.isQuotation
					}
					// sendMessage(Act, GroupID, UserID, SendType, UpMsgID, SendData)
					// console.log('sendToGroup', this.MsgGroupID, MyUser.UserID, 0, 0, sendText);
					sendMessage('sendToGroup', this.MsgGroupID, MyUser.UserID, 0, 0, sendText);
					this.inputMsg = '';
				}
			},
			GroupSet() {
				uni.navigateTo({
					url: '/messagePages/pages/groupset?groupid=' + this.MsgGroupID
				})
			},
			updateMsg() {
				this.$httpost('/Message/SendMessage', {
					MsgGroupID: this.MsgGroupID,
					UserID: this.MyUserID,
					InputMsg: this.inputMsg
				}).then(res => {
					// console.log('MessageData', res);
					if (res.code == 200) {
						// this.inputMsg = ""
						this.isQuotation = 0
						this.QuotationItem = {}
						this.MyUserID = res.data.MyUserID
						this.GroupInfo = res.data.GroupInfo

						// this.MessageList = res.data.MessageList;

						// 如果更新了数据
						this.MessageList = this.MessageList.map(item => {
							const updatedItem = res.data.MessageList.find(data => data.MsgID === item
								.MsgID);
							return updatedItem || item; // 如果找到了更新的数据，则返回更新的数据，否则返回原始数据
						});

						// 如果新增了数据
						res.data.MessageList.forEach(data => {
							const existingItem = this.MessageList.find(item => item.MsgID === data.MsgID);
							if (!existingItem) {
								this.MessageList.push(data);
							}
						});



						if (this.getRedbagState == true) {
							this.currRedbag = this.MessageList.find(item => item.MsgID === this.currRedbag.MsgID)
						}
						this.getRedbagState = false
						// this.scrollTop = this.scrollTop + 100



					}
				});

			},
			//滚动条至最底部
			autoScroll() {
				// var that = this
				// let query = wx.createSelectorQuery()
				// query.select('.display').boundingClientRect(res => {
				// 	this.scrollTop = res.height * 100
				// })
				// query.exec(res => {})



			},
			// 		scrollToBottom() {
			// 			let that = this;
			// 			let query = uni.createSelectorQuery();
			// 			console.log('query', query);

			// 			query.selectAll('.m-item').boundingClientRect();
			// 			query.select('#scrollview').boundingClientRect();
			// 			query.exec(res => {
			// 				console.log('res', res)
			// 				that.style.mitemHeight = 0;
			// 				res[0].forEach(rect => that.style.mitemHeight = that.style.mitemHeight + rect.height + 40);   //获取所有内部子元素的高度
			// 				// setTimeout(() => {

			// 				// }, 100);

			// 				console.log('that.style.mitemHeight', that.style.mitemHeight)
			// 				if (that.style.mitemHeight > (that.style.contentViewHeight - 100)) {   //判断子元素高度是否大于显示高度
			// 					that.scrollTop = that.style.mitemHeight - that.style.contentViewHeight    //用子元素的高度减去显示的高度就获益获得序言滚动的高度
			// 				}
			// 　　　　　　　})
			// 		}
		}
	}
</script>

<style lang="scss">
	.showInput {
		position: absolute;
		top: 0;
		display: flex;
		flex-direction: column;
		align-items: center;

		.richText {
			line-height: 30px;

			::v-deep img {
				vertical-align: middle;
			}
		}
	}

	.msgTime {
		margin-top: 20rpx;
		text-align: center;
		font-size: 24rpx;
		color: #CCC;
	}

	.otherMsgs {
		display: flex;
		margin-top: 20rpx;
	}

	.myMsgs {
		display: flex;
		flex-direction: row-reverse;
		margin-top: 20rpx;
		word-break: break-word;
	}

	.msgHead {
		width: 80rpx;
		height: 80rpx;
		background-color: #CCC;
		border-radius: 80rpx;
		margin: 10rpx;
	}

	.msgHead image {
		width: 80rpx;
		height: 80rpx;
		border-radius: 80rpx;
	}

	.msgInfo {
		width: auto;
		max-width: 60vw;
	}

	.msgName {
		color: #CCC;
	}

	.otherMsg {
		background-color: #FFF;
		border-radius: 20rpx;
		padding: 20rpx;
		margin-top: 10rpx;
		word-break: break-word;
		font-size: 30rpx;
	}

	.myMsg {
		background-color: #FFFFCC;
		border-radius: 20rpx;
		padding: 20rpx;
		font-size: 30rpx;
	}

	.bottomInput {
		position: fixed;
		z-index: 300;
		bottom: 0rpx;
		width: 100vw;
		height: auto;
		min-height: 100rpx;
		background-color: #f0f0f0;
		border-top: 1rpx solid #e0e0e0;
		padding-bottom: 10rpx;
	}

	.qiehuanBtn {
		width: 50rpx;
		height: 50rpx;
		border: 0rpx solid #e0e0e0;
		border-radius: 50rpx;
		background: none;
		margin-right: 10rpx;
	}

	.biaoqing {
		width: 50rpx;
		height: 50rpx;
		border: 0rpx solid #e0e0e0;
		border-radius: 50rpx;
		background: none;
		margin-left: 0rpx;
		margin-right: 10rpx;
	}

	.msgInput {
		width: 100%;
		background-color: #FFF;
		border: 1rpx solid #e0e0e0;
		min-height: 40rpx;
		border-radius: 10rpx;
		padding: 10rpx;
		font-size: 28rpx;
	}

	.quotation {
		width: 100%;
		padding: 10rpx;
		background-color: #e9e9e9;
		border-radius: 10rpx;
		margin-top: 5rpx;
		font-size: 20rpx;
	}

	.redbag {
		width: 350rpx;
		height: 100rpx;
		border-radius: 10rpx;
		background-color: #FF6600;
		text-align: center;
		color: #FFF;
		padding: 30rpx;
		display: flex;
		align-items: center
	}

	.yellowbag {
		width: 350rpx;
		height: 100rpx;
		border-radius: 10rpx;
		background-color: #FF9900;
		text-align: center;
		color: #FFF;
		padding: 30rpx;
		display: flex;
		align-items: center
	}

	.blackbag {
		width: 350rpx;
		height: 100rpx;
		border-radius: 10rpx;
		background-color: #CCC;
		text-align: center;
		color: #FFF;
		padding: 30rpx;
		display: flex;
		align-items: center
	}

	.getRedbagList {
		height: calc(90vh - 340rpx)
	}

	.sendBtn {
		width: 100rpx;
		height: 60rpx;
		font-size: 24rpx;
		text-align: center;
		padding: 0rpx;
		background-color: $globalColor;
		color: #000
	}

	.btmGroupSet {
		height: 50rpx;
		padding: 10rpx;
		text-align: center;
		font-size: 24rpx;
		color: #999
	}

	.popupCloseBtn {
		position: absolute;
		z-index: 1000;
		bottom: 30rpx;
		right: 60rpx;
		width: 200rpx;
		height: 50rpx;
		border-radius: 20rpx;
		background: #FFDD00;
		color: #000;
		text-align: center;
		line-height: 50rpx;
	}

	.fui-title {
		font-size: 32rpx;
		padding-top: 24rpx;
	}

	.fui-descr {
		font-size: 24rpx;
		color: #B2B2B2;
		padding-top: 12rpx;
		padding-bottom: 48rpx;
	}

	.fui-icon__close {
		position: absolute;
		right: 24rpx;
		top: 20rpx;
	}
</style>